<template>
  <div>

     <table>
      <caption>欢迎光临_vue开发的收银系统_水果店</caption>
      <thead>
        <tr>
          <th>苹果{{price}}￥/ 斤数，折扣 {{discount}}</th>
          </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span>请输入你要购买的斤数</span>
            <input type="number" v-model="num">
          </td>
        </tr>
        <tr>
          <td>
            <button @click="btnFn">结账买单~</button>
          </td>
        </tr>
        <tr>
          <td>
            <span>结账单: 总价: {{total}}￥元</span> &nbsp;
            <span>折价后: {{newTotal}}￥元</span>  &nbsp;
            <span>省了: {{save}}￥元</span>
          </td>
        </tr>
      </tbody>
    </table>

  </div>
</template>

<script>
export default {

  data() {
    return {
     total:0 ,//总价
     newTotal:0,//折价后
     save:0 ,//省了
     price: 10,//价格
     discount: '< 8折 >',//折扣
     num: 0
    };
  },
  methods: {
   btnFn(){ 
     this.total=this.num*this.price//得到的是输入后的总金额
     this.newTotal= this.total*0.8// 折扣的价格
     this.save= this.total-this.newTotal//省钱
   } 
  },
};
</script>

<style lang="scss" scoped>

</style>